@import "../../../styles/variable";

.section-header {
  height: 96px;
  width: 100%;
  background-color: @colorBg;
  display: flex;
  flex-direction: row;
  align-items: center;

  .item {
    font-size: @font26;
    line-height: 36px;
    color: @color666;
    font-family: @fontFamilyLight;
    margin-left: 20px;
    &:first-child {
      margin-left: 30px;
    }
    &:last-child {
      margin-right: 30px;
    }
  }
}

.cell-list {
  display: flex;
  flex-direction: column;

  .cell-item {
    display: flex;
    flex-direction: column;
    background-color: @colorWhite;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }

    .cell-top {
      height: 210px;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;

      .cell-icon {
        position: relative;
        margin-left: 30px;
        width: 140px;
        height: 140px;
        box-sizing: border-box;
        &:before {
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 200%;
          box-sizing: border-box;
          border: 1PX solid @colorE5E5E5;
          transform: scale(0.5);
          transform-origin: 0 0;
        }
        .img {
          width: 100%;
          height: 100%;
        }
      }

      .cell-right {
        position: relative;
        margin-left: 20px;
        margin-right: 30px;
        flex: 1;
        display: flex;
        flex-direction: column;

        .cell-title {
          font-size: @font28;
          color: @color333;
          line-height: 42px;
          max-width: 530px;
          .line(1);
        }
        .cell-price {
          font-size: @font28;
          color: @colorD0021B;
          line-height: 42px;
          margin-top: 28px;
        }
        .cell-rb {
          display: flex;
          flex-direction: row;
          align-items: center;
          line-height: 34px;
          .cell-rb_item {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: @font24;
            color: @color999;
            font-family: @fontFamilyLight;

            .sub-title {
              color: @color666;
            }
            &:not(:first-child) {
              margin-left: 20px;
            }
          }
        }
      }

      .arrow {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 96px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 36px;
          height: 36px;
        }
      }
    }

    .inner-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      .inner-item {
        width: 100%;
        height: 88px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: @font26;
        color: @color666;
        background-color: @colorWhite;
        .ii_left {
          margin-left: 30px;
        }
        .ii_right {
          margin-right: 30px;
        }
        &:nth-child(even) {
          background-color: #f8f8f8;
        }
      }
    }
  }

}
